import React from 'react'
import { useLocation } from 'umi'
import Title from '../../.umirc.js'
import { Tabs } from 'antd';
import './css/detail.less'
const Detail: React.FC = () => {
    const location = useLocation();
    const List = location.state.date
    console.log(List.list)


    const { TabPane } = Tabs;

    function callback(key: any) {
        console.log(key);
    }

    const kong = []
    for (let i = 0; i < List.list.length; i++) {
        // kong.push(List.list.market_attribute.year)
        // console.log();
        kong.push(List.list[i].market_attribute.year * 1)
        // console.log(i)
    }
    console.log(kong);
    let array: number[] = [];
    for (var i = 0; i < kong.length; i++) {
        if (array.indexOf(kong[i]) === -1) {
            array.push(kong[i])
        }
    }
    console.log(array)


    const Demo = () => (
        <Tabs defaultActiveKey="1" onChange={callback}>
            <TabPane tab='全部' key='全部'>
                {
                    List.list.map((item: any, index: number) => {
                        return <dl key={index}>
                            <dt>
                                {item.exhaust_str}/{item.max_power_str}
                                {item.inhale_type}
                            </dt>
                            <dd>
                                <span>
                                    {item.market_attribute.year}款
                                </span>
                                <span>
                                    {item.car_name}
                                </span>
                                <p>
                                    <span>
                                        {item.horse_power}马力
                                    {item.gear_num}档
                                    {item.trans_type}
                                    </span>
                                    <p className='fu'>指导价{item.market_attribute.official_refer_price}
                                        <span>{item.market_attribute.dealer_price_min == '' ? '暂无' : item.market_attribute.dealer_price_min + '起'}</span>
                                    </p>
                                    <div className='dijia'>
                                        询问底价
                                        {/* {item.BottomEntranceTitle} */}
                                    </div>
                                </p>
                            </dd>
                        </dl>
                    })
                }
            </TabPane>
            {
                array.map((item: any, index: React.Key | null | undefined) => {
                    return <TabPane tab={item} key={item}>
                        {/* Content of Tab Pane 1 */}
                    </TabPane>
                })
            }
        </Tabs>
    );
    return <div>
        <dl className='shang'>
            <dt>
                <img src={List.CoverPhoto} alt=""  referrerPolicy="no-referrer" />
            </dt>
            <dd className='jiage'>
                <span>{List.market_attribute.dealer_price}</span>
                <p>指导价 {List.market_attribute.official_refer_price}</p>
                <button>{List.BottomEntranceTitle}</button>
            </dd>
        </dl>
        <div className='xia'>
            <Demo />
        </div>
        <div className='dao'>
            询问底价
            <p>本地经销商为你报价</p>
        </div>
    </div>
}
export default Detail